<template>
    <div class="mcls">
        <!-- 准备一个dom：有宽高 -->
        <div :id="uuid" :style="style"></div>
        <div v-if="title" class="titleCls">{{ title }}</div>
    </div>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import * as echarts from 'echarts';
const props =  defineProps({
    dataSource: {
        type: Object,
        default: null,
        required: true
    },
    canvasWidth: {
        type: String,
        default: '',
        required: true
    },
    canvasHeight: {
        type: String,
        default: '',
        required: true
    },
    title: {
        type: String,
        default: '',
        required: false
    }
})
const uuid = ref('')
const myChart = ref(null)
// 时间戳+随机字符
uuid.value = new Date().getTime() + Math.random().toString(32).slice(2, 10)
console.log('唯一标识：','uuid:', uuid.value);
 
let style = computed(() => ({
    width: props.canvasWidth,
    height: props.canvasHeight
}))
console.log('样式:', style.value);
 
const init = () => {
    // 基于准备好的dom，初始化echarts实例
    myChart.value = echarts.init(document.getElementById(uuid.value))
    // 绘制图表
    myChart.value.setOption(props.dataSource)
}
onMounted(() => {
    init()
})
 
 
</script>
<style scoped lang="scss">
.mcls{
    display: flex;
    flex-direction: column;
}
 .titleCls{
    width: 100%;
    text-align: center;
    margin-top: 10px;
 }
</style>